<template>
  <div class="integralExchangeRecord">
    <navBar :title="title"></navBar>
    <ul class="integralDetailedlist">
      <li
        class="integralDetailedlist_item"
        v-for="(item, index) in integralExchangeRecordList"
        :key="index"
      >
        <div class="integralDetailedlist_item_header">
          <span class="header_text">{{item.type == 1 ? "" : "后台" }}兑换{{item.integral}}积分</span>
          <span :class="{'integral_number':true}">-{{item.num}}</span>
        </div>
        <div class="integralDetailedlist_item_bottom">
          <span>创建时间：</span>
          <span>{{item.createdTime}}</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import navBar from "components/navBar";
export default {
  name: "",
  data() {
    return {
      title: "兑换记录",
      integralExchangeRecordList: [
        { integral: 200, type: 1, createdTime: "2019.08.12 10:2", num: 100.0 },
        { integral: 180, type: 1, createdTime: "2019.08.12 10:2", num: 145.23 },
        { integral: 300, type: 0, createdTime: "2019.08.12 10:2", num: 46.66 }
      ]
    };
  },
  components: {
    navBar
  }
};
</script>
<style lang="less" rel="stylesheet/less" scoped>
.integralDetailedlist {
  padding-left: 23px;
  background-color: #fff;
}
.integralDetailedlist_item {
  height: 98px;
  border-bottom: 1px solid #DBDBDB;
  &:last-child {
    border-bottom: none;
  }
  .integralDetailedlist_item_header {
    height: 62px;
    line-height: 62px;
    .header_text {
      font-size: 14px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(48, 48, 48, 1);
    }
    .integral_number {
      float: right;
      margin-right: 17px;
      font-size: 18px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      color: #6db533;
      &.isAdd {
        color: #e96e6e;
      }
    }
  }
  .integralDetailedlist_item_bottom {
    font-size: 11px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
  }
}
</style>
